<template>
  <div class="container">
    <p>
      <span class="label">用户名：</span>
      {{form.name}}
    </p>
    <p>
      <span class="label">添加日期：</span>
      {{createTime}}
    </p>

    <el-form ref="form" :model="form" :rules="rules">
      <el-form-item prop="name" label="单位全称：">
        <el-input v-model="form.name" placeholder="单位全称"></el-input>
      </el-form-item>
      <el-form-item prop="shortName" label="单位简称：">
        <el-input v-model="form.shortName" placeholder="单位简称"></el-input>
      </el-form-item>
      <el-form-item prop="nature" label="单位性质：">
        <el-select v-model="form.nature" placeholder="单位性质">
          <el-option v-for="(item,index) in options.nature" :key="index" :label="item.name" :value="item.val">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="industry" label="所属产业：">
        <el-select v-model="form.industry" placeholder="所属产业">
          <el-option v-for="(item,index) in options.industry" :key="index" :label="item.name" :value="item.val">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="trade" label="所属行业：">
        <el-cascader :options="options.trade" :props="{value:'code',label:'name',children:'childVo'}"
          v-model="form.trade"></el-cascader>
      </el-form-item>
      <el-form-item prop="area" label="所在地区：">
        <el-select v-model="form.area" placeholder="所在地区">
          <el-option v-for="(item,index) in options.area" :key="index" :label="item.name" :value="item.val"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="scale" label="单位规模：">
        <el-select v-model="form.scale" placeholder="单位规模">
          <el-option v-for="(item,index) in options.scale" :key="index" :label="item.name" :value="item.val">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="address" label="公司地址：">
        <el-input v-model="form.address" placeholder="公司地址"></el-input>
      </el-form-item>
      <el-form-item prop="profile" label="单位简介：" class="profile">
        <!-- <el-input type="textarea" v-model="form.profile" rows="6" placeholder="单位简介"></el-input> -->
        <quillEditor @listenEvent="getProfile" :profile='form.profile' v-if='isShowFile' placeholder="公司简介">
        </quillEditor>
      </el-form-item>
      <el-form-item prop="contact" label="联系人：">
        <el-input v-model="form.contact" placeholder="联系人"></el-input>
        <el-checkbox v-model="form.showContact">在企业介绍页显示</el-checkbox>
      </el-form-item>
      <el-form-item prop="contactPhone" label="手机号：">
        <el-input v-model.trim="form.contactPhone" placeholder="手机号"></el-input>
        <el-checkbox v-model="form.showPhone">在企业介绍页显示</el-checkbox>
      </el-form-item>
      <el-form-item prop="tel" label="固定电话">
        <el-input v-model="form.tel" placeholder="0000-00000000-0"></el-input>
      </el-form-item>
      <el-form-item prop="contactMail" label="工作邮箱：">
        <el-input v-model="form.contactMail	" placeholder="工作邮箱"></el-input>
        <el-checkbox v-model="form.showMail">在企业介绍页显示</el-checkbox>
      </el-form-item>
      <el-form-item class="btn_box">
        <el-button class="finish_btn" type="primary" @click="onSubmit" :loading="loading"
          v-loading.fullscreen.lock="loading">保存修改</el-button>
        <el-button class="finish_btn" type="primary" @click="back">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { findDictByCode, findTradeDict, getIndustry, getScale, getArea, getNature } from '../../../../api/index';
import { companyInfo, companyUpdate } from '../../../../api/enterprise';
import quillEditor from '../../../common/quillEditor'; //调用编辑器
import bus from '../../../common/bus'
export default {
  name: '',
  data () {
    // var validateProfile = (rule, value, callback) => {
    //   console.log(1);

    //   let ary = />(.)</.exec(value)
    //   console.log(ary);

    //   // if (this.form.password !== value) {
    //   //   callback(new Error('确认密码与密码不一致！'));
    //   // } else {
    //   //   callback();
    //   // }
    // };
    return {
      isShowFile: false,
      loading: false,
      createTime: '',
      editorOption: {},
      form: {
        id: '',
        name: '',
        shortName: '',
        nature: '',
        industry: '',
        trade: [],
        area: '',
        scale: '',
        address: '',
        profile: '',
        contact: '',
        showContact: '',
        contactPhone: '',
        showPhone: '',
        tel: '',
        contactMail: '',
        showMail: ''
      },
      options: {
        trade: [],
        nature: [],
        industry: [],
        area: [],
        scale: []
      },
      rules: {
        name: [
          { required: true, message: '请输入单位名称', trigger: 'blur' },
          { max: 20, message: '单位名称不能超过20个字' }
        ],
        shortName: [
          { required: true, message: '请输入单位名称', trigger: 'blur' },
          { max: 10, message: '单位名称不能超过10个字' }
        ],
        nature: [{ required: true, message: '请选择单位性质', trigger: 'change' }],
        industry: [{ required: true, message: '请选择所属产业', trigger: 'change' }],
        trade: [{ required: true, message: '请选择所属行业', trigger: 'change' }],
        area: [{ required: true, message: '请选择所在地区', trigger: 'change' }],
        scale: [{ required: true, message: '请选择单位规模', trigger: 'change' }],
        address: [
          { required: true, message: '请输入详细地址', trigger: 'blur' },
          { max: 100, message: '地址不能超过100个字' }
        ],
        profile: [
          { required: true, message: '请输入单位简介', trigger: 'blur' },
          // { validator: validateProfile},
        ],
        contact: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { max: 20, message: '姓名不能超过20个字' }
        ],
        job: [
          { required: true, message: '请输入职位', trigger: 'blur' },
          { max: 20, message: '职位不能超过20个字' }
        ],
        contactMail: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          {
            pattern: /^[A-Za-z0-9]+([_\.][A-Za-z0-9]){0,254}@([A-Za-z0-9\-]{0,64}\.)+[A-Za-z]{2,6}$/,
            message: '请输入正确的邮箱',
            trigger: 'change'
          },
          { max: 80, message: '邮箱不能超过80个字' }
        ],
        contactPhone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号码', trigger: 'change' }
        ],
        tel: [{ pattern: /^(0\d{2,3}-\d{7,8}(-\d{3,5}){0,1})$/, message: '请输入正确的电话号码', trigger: 'change' }]
      }
    };
  },
  created () {
    this.getCompanyInfo();

    // findTradeDict().then(data => {
    //     console.log(data);
    //     this.options.trade = data.data;
    // });
    // let code = ['company_nature', 'industry', 'area', 'scale'];
    // let promise = new Promise((resolve, reject) => {
    //     code.forEach(item => {
    //         findDictByCode(item).then(data => {
    //             this.options[item] = data.data;
    //             if (item === 'scale') {
    //                 resolve();
    //             }
    //         });
    //     });
    // });
    // promise.then(() => {
    //     console.log(this.$route.query.id);
    //     if (this.$route.query.id) {
    //         companyInfo(this.$route.query.id).then(data => {
    //             console.log(data);
    //             if (data.success) {
    //                 Object.keys(this.form).forEach(item => {
    //                     if (item === 'trade') {
    //                         this.form[item] = JSON.parse(data.data[item]);
    //                     }else{
    //                         this.form[item] = data.data[item];
    //                     }
    //                 });
    //                 this.annualTime = data.data.annualTime;
    //             } else {
    //                 this.$message.error(`${data.msg}`);
    //             }
    //         });
    //     }
    // });
  },
  components: {
    //使用编辑器
    quillEditor
  },
  beforeRouteUpdate (to, from, next) {
    this.isShowFile = false;
    console.log(to);
    companyInfo(to.query.id).then(data => {
      if (data.success) {
        Object.keys(this.form).forEach(item => {
          if (item === 'trade') {
            this.form[item] = JSON.parse(data.data[item]);
          } else {
            this.form[item] = data.data[item];
          }
        });
        this.createTime = data.data.createTime;
      } else {
        this.$message.error(`${data.msg}`);
      }
      this.isShowFile = true;
    })
    next();
  },
  methods: {
    getProfile (params) {
      console.log(params);
      this.form.profile = params;
    },
    // 获取企业信息
    getCompanyInfo () {
      if (this.$route.query.id) {
        let obj = {
          nature: getNature,
          industry: getIndustry,
          scale: getScale,
          area: getArea,
          trade: findTradeDict
        };
        Promise.all(Object.values(obj).map(item => item()))
          .then(data => {
            Object.keys(obj).forEach((key, index) => {
              this.options[key] = data[index].data;
            });
            console.log(this.options);
            return companyInfo(this.$route.query.id);
          })
          .then(data => {
            if (data.success) {
              Object.keys(this.form).forEach(item => {
                if (item === 'trade') {
                  if (data.data[item]) {
                    this.form[item] = JSON.parse(data.data[item]);
                  } else {
                    this.form[item] = data.data[item];
                  }
                  // this.form[item] = JSON.parse(data.data[item]);
                } else {
                  this.form[item] = data.data[item];
                }
              });
              this.createTime = data.data.createTime;
            } else {
              this.$message.error(`${data.msg}`);
            }
            this.isShowFile = true;
          });
      } else {
        this.$message.error('无法获得企业信息,请重试！');
        this.$router.push({ path: '/companyList' });
      }
    },
    // 保存
    onSubmit () {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.loading = true;
          let query = { ...this.form, trade: JSON.stringify(this.form.trade) };
          companyUpdate(query).then(data => {
            console.log(data);
            if (data.success) {
              this.loading = false;
              bus.$emit('closeTag', { fullPath: this.$route.fullPath })
              this.$router.push({ path: '/companyList' });
            } else {
              this.loading = false;
              this.$message.error(`${data.msg}`);
            }
          });
        }
      });
    },
    // 返回
    back () {
      bus.$emit('closeTag', { fullPath: this.$route.fullPath })
      this.$router.push({ path: '/companyList' })
    }
  }
};
</script>

<style scoped>
.label {
    width: 150px;
    display: inline-block;
    text-align: right;
    vertical-align: middle;
    font-size: 14px;
    color: #606266;
    line-height: 32px;
    padding: 0 12px 0 0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
}
.welfare .editer {
    margin-left: 150px;
    width: 500px;
}
.container p {
    margin-bottom: 25px;
}
.el-form .el-form-item {
    margin-bottom: 25px;
}
.el-form .el-form-item /deep/ .el-form-item__error {
    left: 150px;
}
.el-form .el-form-item /deep/ .el-form-item__label {
    width: 150px;
}
.el-form-item.profile {
    display: block;
    width: 800px;
    display: flex;
    flex-direction: row;
}
.el-form-item.profile /deep/ .el-form-item__content {
    flex: 1;
    margin-top: -10px;
}
.el-form-item.profile /deep/ .el-form-item__error {
    left: 0;
}
.el-input {
    width: 300px;
    margin-right: 10px;
}
.el-cascader {
    width: 300px;
}
.el-textarea {
    width: 300px;
}
.el-select {
    width: 300px;
}

.btn_box {
    padding-left: 118px;
}
.el-button {
    width: 100px;
    margin-right: 80px;
}
.container /deep/ .el-form-item__label {
    width: 120px;
}
</style>